<script setup lang="ts">
import { ref } from 'vue'

interface Blog {
  id: number
  title: string
  content: string
  excerpt: string
  author: string
  publishDate: string
  tags: string[]
  readTime: number
  views: number
  likes: number
}

interface Props {
  blogs: Blog[]
}

defineProps<Props>()

const emit = defineEmits<{
  selectBlog: [blog: Blog]
}>()

const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}
</script>

<template>
  <div class="blog-list">
    <div class="list-header">
      <h2>最新文章</h2>
      <div class="sort-options">
        <select class="sort-select">
          <option value="latest">最新发布</option>
          <option value="popular">最多阅读</option>
          <option value="likes">最多点赞</option>
        </select>
      </div>
    </div>
    
    <div class="articles">
      <article 
        v-for="blog in blogs" 
        :key="blog.id"
        class="blog-card"
        @click="emit('selectBlog', blog)"
      >
        <div class="card-header">
          <h3 class="blog-title">{{ blog.title }}</h3>
          <div class="blog-meta">
            <span class="author">👤 {{ blog.author }}</span>
            <span class="date">📅 {{ formatDate(blog.publishDate) }}</span>
            <span class="read-time">⏱️ {{ blog.readTime }} 分钟阅读</span>
          </div>
        </div>
        
        <div class="card-content">
          <p class="blog-excerpt">{{ blog.excerpt }}</p>
        </div>
        
        <div class="card-footer">
          <div class="tags">
            <span 
              v-for="tag in blog.tags" 
              :key="tag"
              class="tag"
            >
              {{ tag }}
            </span>
          </div>
          
          <div class="stats">
            <span class="stat">
              👁️ {{ blog.views }}
            </span>
            <span class="stat">
              ❤️ {{ blog.likes }}
            </span>
          </div>
        </div>
      </article>
    </div>
    
    <div class="pagination">
      <button class="page-btn" disabled>上一页</button>
      <span class="page-info">第 1 页，共 1 页</span>
      <button class="page-btn">下一页</button>
    </div>
  </div>
</template>

<style scoped>
.blog-list {
  padding: 24px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.list-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.sort-options {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  font-size: 14px;
  cursor: pointer;
}

.articles {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.blog-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  border-color: #667eea;
}

.blog-card:hover::before {
  transform: scaleX(1);
}

.card-header {
  margin-bottom: 16px;
}

.blog-title {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 700;
  color: #333;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-meta {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #666;
  flex-wrap: wrap;
}

.card-content {
  margin-bottom: 20px;
}

.blog-excerpt {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.stats {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #666;
}

.stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e0e0e0;
}

.page-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.page-btn:hover:not(:disabled) {
  background: #f8f9ff;
  border-color: #667eea;
  color: #667eea;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 14px;
  color: #666;
}

@media (max-width: 768px) {
  .blog-list {
    padding: 16px;
  }
  
  .list-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .blog-card {
    padding: 16px;
  }
  
  .blog-title {
    font-size: 18px;
  }
  
  .blog-meta {
    gap: 12px;
  }
  
  .card-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
